<template>
	<Container>
		<view class="header">
			<view class="article" v-if="isStart">
				<image class="img" :src="'https://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/question/shape/' + encodeURI(articleImg) + '.png'" mode="aspectFit"></image>
			</view>
			<view class="article" v-if="!isStart">
				<view
					class="option"
					:class="{ articleLight: current === index }"
					v-for="(item, index) in assignment.optionArticles"
					:key="index"
					hover-class="touch"
					hover-stay-time="300"
				>
					<image
						class="image img"
						:style="{ filter: colors[item.colorText] }"
						:src="'https://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/question/shape/' + encodeURI(item.shapeText) + '.png'"
						mode="aspectFit"
					></image>
				</view>
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="isStart ? assignment.questionName : ''" />
		<Record ref="audio" @recordFinish="recordFinish" :isStart="!isStart || questionPress" :answerText="assignment.answerTexts" :typeCode="assignment.typeCode" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import Record from '../record.vue'
export default {
	data() {
		return {
			colors: this.config.shapeColor,
			current: 0,
			isStart:false,
			articleIsShow: true,
			timer: null,
			audioUrl: ''
		}
	},
	mixins: [mixins],
	components: { AudioIcon, Question, Container, Record },
	computed: {
		articleImg() {
			return this.assignment.optionArticles.filter(articles => {
				return articles.isMatched
			})[0].shapeText
		}
	},
	beforeDestroy() {
		clearTimeout(this.timer)
	},
	methods: {
		questionPlay: async function() {
			if (this.isStart) {
				this.questionAudio()
				return
			}
			clearTimeout(this.timer)
			this.dialogueAudio({
				src: this.assignment.optionArticles[this.current].audioUrl,
				start: () => {
					this.questionPress = true
				},
				end: () => {
					this.questionPress = false
					this.timer = setTimeout(() => {
						if (this.current === this.assignment.optionArticles.length - 1) {
							this.isStart = true
							this.current = -1
							this.questionAudio()
							return
						}
						this.current++
						this.questionPlay()
					}, 3000)
				}
			})
		},
		questionAudio: async function() {
			const data = await this.parseTextAudio({
				text: this.assignment.questionName,
				speaker: this.assignment.audioSpeaker ? this.assignment.audioSpeaker : null
			})
			this.dialogueAudio({
				src: data,
				start: () => {
					this.questionPress = true
				},
				end: () => {
					this.questionPress = false
					this.assignment.optionArticles.map((item, index) => {
						if (item.isMatched) this.current = index
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 50vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 1.5vh 0 5vh 0
	display flex
	position relative
	.article
		width 100%
		height 100%
		display flex
		align-items center
		justify-content center
		flex-wrap wrap
		animation outIn 0.4s
		image
			width 75%
			height 75%
		.option
			width 50%
			height 45%
			display flex
			align-items center
			justify-content center
			transition all 0.3s
			position relative
			.image
				width 85%
				height 85%
				transition all 0.3s
			.imgScale
				transform scale(1.3)
				filter drop-shadow(0 0 5rpx gold)
</style>
